<template>
  <s-layout class="set-wrap" title="店铺管理" :bgStyle="{ color: '#f7f7f7' }">
    <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" />

    <view class="flex flex-col gap-3 p-4">
      <view class="grid grid-cols-4 place-content-center place-items-center">
        <view class="flex flex-col gap-1 justify-center items-center" v-for="(i, k) in state.data" :key="k" @click="handleClick(k)">
          <image :src="i.url" mode="scaleToFill" class="size-[3rem]" />
          <view class="text-[.875rem]" :class="state.active === k ? 'text-[#0788C8] font-bold' : 'text-[#41617A]'">{{ i.name }} </view>
        </view>
      </view>

      <template v-if="state.active == 0">
        <u-alert type="error" title="等待实名认证审核" v-if="state.status === 0"></u-alert>
        <u-alert type="error" title="实名认证已通过" v-if="state.status === 1"></u-alert>
        <u-alert type="error" title="实名认证审核失败" :description="state.msg" v-if="state.status === 2"></u-alert>

        <view class="flex overflow-hidden flex-col px-4 bg-white rounded-lg">
          <view class="flex gap-7 items-center py-2">
            <view class="text-[.9375rem] text-[#333333] flex-none"> 店铺名称 </view>
            <uni-easyinput
              v-model="state.name"
              placeholder="请输入店铺名称"
              type="text"
              :inputBorder="false"
              maxlength="3"
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            >
            </uni-easyinput>
          </view>
          <u-line></u-line>
          <view class="flex relative gap-7 items-center py-2">
            <view class="size-full absolute inset-0 z-50" @click="state.regionShow = true"></view>
            <view class="text-[.9375rem] text-[#333333] flex-none"> 所属区域 </view>
            <uni-easyinput
              v-model="state.region"
              type="text"
              placeholder="请输入所属区域"
              :inputBorder="false"
              disabled
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
              :styles="{ disableColor: '#fff', color: '#333' }"
            >
              <template #right>
                <u-icon name="arrow-right"></u-icon>
              </template>
            </uni-easyinput>
          </view>
          <u-line></u-line>
          <view class="flex relative gap-7 items-center py-2">
            <view class="size-full absolute inset-0 z-50" @click="handleAddress"></view>

            <view class="text-[.9375rem] text-[#333333] flex-none"> 详细地址 </view>
            <uni-easyinput
              v-model="state.address"
              type="text"
              placeholder="请输入详细地址"
              :inputBorder="false"
              disabled
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
              :styles="{ disableColor: '#fff', color: '#333' }"
            >
              <template #right>
                <u-icon name="arrow-right"></u-icon>
              </template>
            </uni-easyinput>
          </view>
          <u-line></u-line>
          <view class="flex gap-7 items-center py-2">
            <view class="text-[.9375rem] text-[#333333] flex-none"> 法人代表 </view>
            <uni-easyinput
              v-model="state.frname"
              placeholder="请输入法人代表"
              type="text"
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
              :inputBorder="false"
            >
            </uni-easyinput>
          </view>
          <u-line></u-line>
          <view class="flex gap-7 items-center py-2">
            <view class="text-[.9375rem] text-[#333333] flex-none"> 联系电话 </view>
            <uni-easyinput
              v-model="state.mobile"
              placeholder="请输入联系电话"
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
              type="number"
              :inputBorder="false"
            >
            </uni-easyinput>
          </view>
          <u-line></u-line>
          <view class="flex flex-col gap-4 py-4">
            <view class="text-[.9375rem] text-[#333333] flex-none"> 营业执照 </view>
            <s-uploader
              v-model:url="state.license_image"
              fileMediatype="image"
              limit="1"
              mode="grid"
              :imageStyles="{ width: '168rpx', height: '168rpx' }"
            >
            </s-uploader>
          </view>
          <!-- <view class="flex items-center pb-4">
            <u-checkbox-group @change="checkboxGroupChange">
              <u-checkbox v-model="state.checked" shape="circle"></u-checkbox>
            </u-checkbox-group>
            <view class="text-[13px] text-[#616161] flex items-center">
              我已阅读并同意相关条款
              <view class="text-[#FF1515]" @click="toUserAgreement"> 《店铺入驻》 </view>
            </view>
          </view> -->
        </view>
        <view class="h-[6.25rem]"></view>
      </template>
      <!--  -->
      <!--  -->
      <!--  -->
      <template v-if="state.active == 1">
        <!-- productCategoryactive -->
        <u-tabs :list="state.productCategory" :scrollable="true" v-model="state.productCategoryactive" @change="handleChange"></u-tabs>
        <s-empty v-if="state.list.length === 0" text="暂无商品" icon="/static/collect-empty.png" />

        <view v-for="(i, k) in state.list" :key="k" class="flex overflow-hidden gap-4 items-start p-4 bg-white rounded-lg">
          <view class="aspect-square overflow-hidden flex-none bg-gray-50 rounded-lg h-[6.25rem]">
            <image :src="i.image" class="size-full" mode="scaleToFill" />
          </view>
          <view class="flex flex-col flex-1 gap-3 justify-between">
            <view class="text-[1rem] text-[#111111] line-clamp-1">{{ i.title }}</view>
            <view class="text-[.8125rem] text-[#666666] line-clamp-2">
              {{ i.subtitle }}
            </view>

            <view class="flex justify-between">
              <view class="text-[.8125rem] text-[#C17F37]"> 供货价：{{ i.cost_price }} </view>
              <view class="text-[.8125rem] text-[#FE3131]"> 会员价：{{ i.price }}</view>
            </view>
            <view class="text-[.8125rem] text-[#666666] line-clamp-1"> 品牌名称：{{ i.brand_name }} </view>
            <!-- //brand_name -->
            <view class="flex gap-3 items-center">
              <!-- {{ i.status }} -->
              <!-- <view class="grid place-items-center w-full h-[1.875rem] bg-[#0788C8] rounded-lg text-white" @click="editProduct(i)">修改</view> -->
              <view class="grid place-items-center w-full h-[1.875rem] bg-[#0788C8] rounded-lg text-white" @click="goodsUpDownShop(i)">
                {{ i.status == 'up' ? '下架' : '上架' }}
              </view>
            </view>
          </view>
        </view>
      </template>
      <!--  -->
      <!--  -->
      <!--  -->
      <template v-if="state.active == 2">
        <u-tabs :list="state.orderStatus" :scrollable="true" v-model="state.orderStatusActive" @change="handleOrderStatusChange"></u-tabs>
        <s-empty v-if="state.orderLists.length === 0" text="暂无订单" icon="/static/collect-empty.png" />

        <view v-for="(i, k) in state.orderLists" :key="k" class="flex overflow-hidden flex-col gap-4 p-4 bg-white rounded-lg">
          <view class="flex justify-between items-center">
            <view class="text-[.8125rem] text-[#333333]">订单编号：{{ i.order_sn }}</view>
            <view class="text-[.75rem] text-[#FE3131]">{{ i.status_text }}</view>
          </view>
          <view class="flex gap-4 items-start h-[6.25rem]">
            <view class="aspect-square overflow-hidden flex-none h-full bg-gray-50 rounded-lg">
              <image :src="i.items[0].goods_image" class="size-full" mode="scaleToFill" />
            </view>
            <view class="flex flex-col flex-1 justify-between h-full">
              <view class="text-[1rem] text-[#111111] line-clamp-1">{{ i.items[0].title }}</view>
              <view class="flex justify-between items-center">
                <!-- <view class="text-[.8125rem] text-[#666666]">{{ i.items[0].goods_num }}</view> -->
                <view class="text-[.8125rem] text-[#666666]">数量：{{ i.items[0].goods_num }}</view>
              </view>
              <view class="flex justify-between items-center">
                <view class="text-[.8125rem] text-[#C17F37]"> 供货价:{{ i.items[0].goods_cost_price }} </view>
                <view class="text-[.8125rem] text-[#FE3131]"> 会员价:{{ i.items[0].goods_price }} </view>
              </view>
            </view>
          </view>
          <view class="flex flex-col gap-1">
            <view class="text-[.8125rem] text-[#666666]">收货昵称：{{ i.address.consignee }}</view>
            <view class="text-[.8125rem] text-[#666666]">联系方式：{{ i.address.mobile }}</view>
            <view class="text-[.8125rem] text-[#666666]">收货地址：{{ i.address.address }}</view>
            <view class="text-[.8125rem] text-[#666666]">品牌名称：{{ i.brand_name }}</view>
          </view>

          <!-- <view class="h-[2.4375rem] bg-[#0788C8] rounded-lg overflow-hidden grid place-items-center" @click="sendGoods(i)">
            <view class="text-[.875rem] text-[#FFFFFF]">立即发货</view>
          </view> -->
        </view>
      </template>
      <!--  -->
      <!--  -->
      <!--  -->
      <template v-if="state.active == 3">
        <view class="flex overflow-hidden flex-col gap-4 p-4 bg-white rounded-lg">
          <view class="flex gap-1 items-center">
            <image src="/static/13808150797.png" class="size-5" mode="scaleToFill" />
            <view class="text-[1rem] text-[#FD8B27]">开店({{ state.storeStatisticsList?.shop?.day || 0 }})天 </view>
          </view>
          <view class="grid grid-cols-4">
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.shop?.goods_num || 0 }}</view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 商品数 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.shop?.user_num || 0 }} </view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 下单客户 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.shop?.order_num || 0 }}</view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 下单数量 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.shop?.order_goodsnum || 0 }} </view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 销售总额 </view>
            </view>
          </view>
        </view>
        <!--  -->
        <!--  -->
        <!--  -->
        <!-- <view class="flex overflow-hidden flex-col gap-4 p-4 bg-white rounded-lg">
          <view class="flex gap-1 items-center">
            <image src="/static/Frame@3x.png" class="size-5" mode="scaleToFill" />
            <view class="font-medium text-[1rem] text-[#0788C8]">明细 </view>
          </view>

          <view class="grid grid-cols-4">
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.income?.today || 0 }} </view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 今日收入 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.income?.yesterday || 0 }}</view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 昨日收入 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.income?.month || 0 }}</view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 本月收入 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.375rem] text-[#1A1A1A] font-bold gap-1"> {{ state.storeStatisticsList?.income?.total || 0 }}</view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 累计收入 </view>
            </view>
          </view>
        </view> -->
        <!--  -->
        <!--  -->
        <!--  -->
        <!-- <view class="flex overflow-hidden flex-col gap-4 p-4 bg-white rounded-lg">
          <view class="flex gap-1 items-center">
            <image src="/static/13116004423.png" class="size-5" mode="scaleToFill" />
            <view class="font-medium text-[1rem] text-[#0788C8]">钱包 </view>
          </view>
          <view class="grid grid-cols-3">
            <view class="flex flex-col items-center">
              <view class="text-[1.2rem] text-[#1A1A1A] font-bold gap-1">{{ state.storeStatisticsList?.wallet?.money || 0 }} </view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 可提现金额 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.2rem] text-[#1A1A1A] font-bold gap-1">{{ state.storeStatisticsList?.wallet?.money_wait || 0 }} </view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 待结算金额 </view>
            </view>
            <view class="flex flex-col items-center">
              <view class="text-[1.2rem] text-[#1A1A1A] font-bold gap-1">{{ state.storeStatisticsList?.wallet?.money_already || 0 }} </view>
              <view class="text-[.8125rem] text-[rgba(26,26,26,0.68)]"> 已结算金额 </view>
            </view>
          </view> 
        </view>-->
      </template>
    </view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white" v-if="state.active == 0">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="shopApplyEdit">
        <view class="font-medium text-[1rem] text-[#FFFFFF]"> 确认修改 </view>
      </view>
    </view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white" v-if="state.active == 1">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="synchronizeProducts">
        <view class="font-medium text-[1rem] text-[#FFFFFF]"> 同步商品 </view>
      </view>
    </view>
    <view class="h-[6.25rem]"></view>

    <!-- <s-empty v-if="!state.gpLogList.length" text="暂无数据" icon="/static/data-empty.png" /> -->

    <!--  -->
    <!--  -->
    <!--  -->
    <su-region-picker :show="state.regionShow" :default-region="state.region" @cancel="state.regionShow = false" @confirm="onRegionConfirm">
    </su-region-picker>
  </s-layout>
  <su-region-picker :show="state.regionShow" @cancel="state.regionShow = false" @confirm="onRegionConfirm"> </su-region-picker>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    orderStatus: [
      { name: '全部', type: 'all' },
      { name: '待发货', type: 'nosend' },
      { name: '待收货', type: 'noget' },
      { name: '待评论', type: 'nocomment' },
    ],
    orderStatusActive: 0,
    regionShow: false,
    list: [],
    loading: true,
    active: 0,
    data: [
      {
        name: '店铺信息',
        url: '/static/frame4.png',
      },
      {
        name: '商品明细',
        url: '/static/frame1.png',
      },
      {
        name: '订单明细',
        url: '/static/frame2.png',
      },
      {
        name: '经营数据',
        url: '/static/frame3.png',
      },
    ],
    checked: false,
    applyShowData: {},
    name: '', // 店铺名称
    region: '', // 所属区域
    address: '', // 详细地址
    frname: '', // 法人代表
    mobile: '', // 联系电话
    province: '', // 省份
    city: '', // 城市
    district: '', // 区县
    license_image: '', // 营业执照
    productCategory: [],
    productCategoryactive: 0,
    productCategoryid: '',
    storeStatisticsList: {}, // 经营数据
    //----------
    status: '',
    msg: '',
    page: 1,
    orderLists: [],
  });

  watch(
    () => state.value.active,
    (newVal) => {
      state.value.list = [];
      state.value.orderLists = [];
      if (newVal == 0) {
        // 获取申请信息
        shopApplyShow();
      }
      if (newVal == 1) {
        state.value.page = 1;
        // 获取商品分类
        goodscategory();
      }
      if (newVal == 2) {
        state.value.page = 1;
        // 获取订单列表
        shopOrderList();
      }
      if (newVal == 3) {
        // 获取经营数据
        shopStatistics();
      }
    },
    {
      immediate: true,
    },
  );

  onReachBottom(() => {
    let active = state.value.active;
    if (active == 1) {
      state.value.page++;
      goodsList();
    }
    if (active == 2) {
      state.value.page++;
      shopOrderList();
    }
  });
  // onShow((e) => {
  //   if (active == 1) {
  //     goodsList();
  //   }
  // });

  // ****************

  function shopStatistics() {
    let obj = {};
    sheep.$api.yy.shopStatistics(obj).then((res) => {
      console.log('🚀 ~ shopStatistics ~ res:', res);
      if (res.code === 1) {
        state.value.storeStatisticsList = res.data;
      }
    });
  }
  function shopOrderList(type = 'all') {
    let obj = {
      type,
      page: state.value.page,
    };
    sheep.$api.yy.shopOrderList(obj).then((res) => {
      state.value.orderLists = [...state.value.orderLists, ...res.data.data];
    });
  }
  function goodsList() {
    let obj = {
      category_id: state.value.productCategoryid,
      page: state.value.page,
    };
    sheep.$api.yy.goodsLists(obj).then((res) => {
      state.value.list = [...state.value.list, ...res.data.data];
    });
  }

  function goodscategory() {
    let obj = {};
    sheep.$api.yy.goodscategory(obj).then((res) => {
      if (res.code === 1) {
        state.value.productCategory = res.data;
        state.value.productCategoryid = res.data[0].id;
        goodsList();
      }
    });
  }

  function shopApplyShow() {
    let obj = {};
    sheep.$api.yy.shopApplyShow(obj).then((res) => {
      console.log('🚀 ~ applyShow ~ res:', res);
      // state.value.applyShowData = res.data;
      state.value.name = res.data.name || '';
      state.value.region = res.data.province + res.data.city + res.data.district;
      state.value.address = res.data.address || '';
      state.value.frname = res.data.frname || '';
      state.value.mobile = res.data.mobile || '';
      state.value.province = res.data.province || '';
      state.value.city = res.data.city || '';
      state.value.district = res.data.district || '';
      state.value.license_image = res.data.license_image || '';
      //-------------
      state.value.status = res.data.status || '';
      state.value.msg = res.data.msg || '';
    });
  }
  function onRegionConfirm({ province_name, city_name, district_name }) {
    console.log('🚀 ~ onRegionConfirm ~ district_name:', district_name);
    console.log('🚀 ~ onRegionConfirm ~ city_name:', city_name);
    console.log('🚀 ~ onRegionConfirm ~ province_name:', province_name);

    state.value.province = province_name;
    state.value.city = city_name;
    state.value.district = district_name;
    state.value.region = province_name + city_name + district_name;
    state.value.regionShow = false;
  }
  function handleClick(k) {
    if (state.value.status !== 1) {
      // 提示
      uni.showToast({
        title: '店铺审核通过后才能操作',
        icon: 'none',
      });
      return;
    }

    state.value.active = k;
  }
  function checkboxGroupChange() {
    state.value.checked = !state.value.checked;
  }
  function toUserAgreement() {}
  function shopApplyEdit() {
    if (state.value.name.length !== 3) {
      uni.showToast({
        title: '店铺名称长度不够',
        icon: 'none',
      });
      return;
    }
    let obj = {
      name: state.value.name,
      region: state.value.region,
      address: state.value.address,
      frname: state.value.frname,
      mobile: state.value.mobile,
      province: state.value.province,
      city: state.value.city,
      district: state.value.district,
      license_image: state.value.license_image,
    };
    sheep.$api.yy.shopApplyEdit(obj).then((res) => {
      if (res.code === 1) {
        uni.showToast({
          title: '修改成功',
          icon: 'none',
        });
      }
    });
  }
  function handleChange(item) {
    state.value.productCategoryid = item.id;
    state.value.page = 1;
    state.value.list = [];

    goodsList();
  }
  function addProduct() {
    uni.navigateTo({ url: '/pages/yy/addGoodsBrand' });
    // 获取商品列表选择
  }
  function goodsUpDownShop(i) {
    uni.showModal({
      title: '提示',
      content: '确认要上下架该商品吗?',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (cancel) return;
        let obj = {
          id: i.id,
        };
        sheep.$api.yy.goodsUpDownShop(obj).then((res) => {
          if (res.code === 1) {
            uni.showToast({
              title: '下架成功',
              icon: 'none',
            });
            state.value.page = 1;
            state.value.list = [];
            goodsList();
          }
        });
      },
    });
  }
  function editProduct(i) {
    uni.navigateTo({ url: '/pages/yy/addGoods?id=' + i.id });
  }
  function handleOrderStatusChange(e) {
    state.value.orderLists = [];
    state.value.page = 1;
    shopOrderList(e.type);
  }
  function sendGoods(i) {
    uni.navigateTo({ url: '/pages/yy/delivery?id=' + i.id });
  }
  function toWithdraw() {
    uni.navigateTo({ url: '/pages/pay/withdraw' });
  }
  function handleAddress() {
    uni.chooseLocation({
      success__: function (res) {
        console.log('位置名称：' + res.name);
        console.log('详细地址：' + res.address);
        console.log('纬度：' + res.latitude);
        console.log('经度：' + res.longitude);
        state.value.address = res.address;
      },
    });
  }
  function synchronizeProducts() {
    // goodsSync
    let obj = {};
    sheep.$api.yy.goodsSync(obj).then((res) => {
      if (res.code === 1) {
        uni.showToast({
          title: '同步成功',
          icon: 'none',
        });
        state.value.page = 1;
        state.value.list = [];
        goodsList();
      }
    });
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }
</style>
